<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .floor {
            width: 800px;
            height: 800px;
            border: 1px solid #ccc;
            background: lightcoral;
            text-align: center;
            margin-bottom: 100px;
        }

        .floor p {
            font-size: 50px;
            color: #000;
            font-weight: 700;
        }

        .list {
            list-style: none;
            width: 90px;
            height: 180px;
            text-align: center;
            position: fixed;
            top: 65%;
            right: 80px;
        }

        .list .list-item {
            width: 80px;
            height: 40px;
            line-height: 40px;
            background-color: lightgreen;



        }

        .list .list-item.on {
            background-color: crimson;
        }
    </style>
</head>

<body>
    <div class="floor">
        <p>1楼</p>
    </div>
    <div class="floor">
        <p>2楼</p>
    </div>
    <div class="floor">
        <p>3楼</p>
    </div>
    <div class="floor">
        <p>4楼</p>
    </div>


    <ul class="list">
        <li class="list-item">1</li>
        <li class="list-item">2</li>
        <li class="list-item">3</li>
        <li class="list-item">4</li>
    </ul>
</body>
<script>
    let lis = document.querySelectorAll(".list-item")
    let floor = document.querySelectorAll(".floor")
    let timeID = null
    lis.forEach(function (li, i) {
        li.addEventListener("click", function () {
            if(timeID){
            return
        }
            lis.forEach(function (a) {
                a.classList.remove("on")
            })
            this.classList.add("on")
            let cur = document.documentElement.scrollTop
            let target = floor[i].offsetTop
            if (target > cur) {
                timeID = setInterval(function () {
                    cur += 30
                    document.documentElement.scrollTop = cur
                    if (target - cur <= 30) {
                        clearInterval(timeID)
                        timeID = null
                        document.documentElement.scrollTop = target
                    }
                }, 20)
            } else {
                timeID = setInterval(function () {
                    cur -=30
                    document.documentElement.scrollTop = cur
                    if (cur - target <= 50) {
                        clearInterval(timeID)
                        timeID = null
                        document.documentElement.scrollTop = target
                    }
                }, 20)
            }

        })
    })
</script>

</html>